<div id="need_help" ng-controller="NeedHelpCtrl">
	<div id='page-title' ng-style="{width:titleWidth()}">{{localize('Nav Pane', "Need Help?")}}</div>
 	<div id="menu" class="hideable" ng-style="{left: menuLeft, height: contentHeight()}">
 		<ul>
			<li class="selected-{{'quickstartguide' == selected_item}}">
				<a ng-click="selectItem('#quickstartguide')">{{localize("Need Help?", "Quick Start Guide")}}</a>
			</li>
			<li class="selected-{{'videos' == selected_item}}">
				<a ng-click="selectItem('#videos')">{{localize("Need Help?", "Video")}}</a>
				<ul>
					<li ng-repeat="item in videos" class="selected-{{item.id == selected_item}}">
						<a ng-click="selectItem('#'+item.id)">
							{{localize("Need Help?", item.title)}}
						</a>
					</li>
				</ul>
			</li>
			<li class="selected-{{'product_help' == selected_item}}">
				<a ng-click="selectItem('#product_help')">{{localize("Need Help?", "Product Help")}}</a>
			</li>
			<li class="selected-{{'insights' == selected_item}}">
				<a ng-click="selectItem('#insights')">{{localize("Need Help?", "Insights")}}</a>
				<ul>
					<li ng-repeat="item in insights" class="selected-{{item.id == selected_item}}">
						<a ng-click="selectItem('#'+item.id)">
							{{localize("Need Help?",item.title)}}
						</a>
					</li>
				</ul>
			</li>
			<li class="selected-{{'tips_tricks' == selected_item}}">
				<a ng-click="selectItem('#tips_tricks')">{{localize("Need Help?", "Tips & Tricks")}}</a>
				<ul>
					<li ng-repeat="item in tips_tricks" class="clearfix selected-{{item.id == selected_item}}">
						<a ng-click="selectItem('#'+item.id)">
							{{localize("Need Help?",item.title)}}
						</a>
					</li>
				</ul>
			</li>
			<li>
				<ul>
					<li>
						<a href="external:http://www.corel.com/">
							{{localize("Need Help?", "Online resources...")}}
						</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>
	<div class='menupopper' ng-click="popupMenu()" ng-class='{ glow: menuPopped, "hidden-true": (!menuCollapsed) }'>&#x2261;</div>

 	<div id="content" ng-style="{left: contentLeft, width: contentWidth(), height: contentHeight()}">
		<ul id="quickstartguide">
			<li>
				<div class="title"><a ng-click="launchQuickStartGuide()">{{localize("Need Help?", "Quick Start Guide")}}</a></div>
				<div class="description">{{localize("Need Help?", "Quick Start Guide Description")}}</div>
			</li>
		</ul>

		<ul id="videos">
			<li ng-repeat="item in videos" class="clearfix" id="{{item.id}}">
				<div class="hr"></div>
				<div class="colpicture">
					<a ng-click="itemEvent(item)"><img src="{{item.preview}}" ng-style="{left: contentLeft, 'max-width': contentWidth()-30,'max-height': contentHeight()-60}"/></a>
				</div>
				<div class="col">
					<div class="title"><a ng-click="itemEvent(item)">{{localize("Need Help?",item.title)}}</a></div>
					<div class="description">{{localize("Need Help?",item.description)}}</div>
					<div class="description">{{localize("Need Help?",videoInternetConnection)}}</div>
				</div>
			</li>
		</ul>

	 	<ul id="product_help">
			<li ng-repeat="item in product_help" class="clearfix" id="{{item.id}}">
				<div class="hr"></div>
				<div class="colpicture">
					<a ng-click="itemEvent(item)"><img src="{{item.preview}}" ng-style="{left: contentLeft, 'max-width': contentWidth()-30,'max-height': contentHeight()-60}"/></a>
				</div>
				<div class="col">
					<div class="title"><a ng-click="itemEvent(item)">{{localize("Need Help?",item.title)}}</a></div>
					<div class="description">{{localize("Need Help?", item.description)}}</div>
				</div>
			</li>
		</ul>

		<ul id="insights">
			<li ng-repeat="item in insights" class="clearfix" id="{{item.id}}">
				<div class="hr"></div>
				<div class="colpicture">
					<a ng-href="external:{{tutorPath + item.link}}"><img src="{{item.preview}}" ng-style="{left: contentLeft, 'max-width': contentWidth()-30,'max-height': contentHeight()-60}"/></a>
				</div>
				<div class="col">
					<div class="title"><a ng-href="external:{{tutorPath + item.link}}">{{localize("Need Help?",item.title)}}</a></div>
					<div class="artist">{{localize("Need Help?",item.artist)}}</div>
					<div class="description">{{localize("Need Help?", item.description)}}</div>
				</div>
			</li>
		</ul>

	 	<ul id="tips_tricks">
			<li ng-repeat="item in tips_tricks" class="clearfix" id="{{item.id}}">
				<div class="hr"></div>
				<div class="title">{{localize("Need Help?",item.title)}}</div>
				<div class="description">{{localize("Need Help?", item.description)}}</div>
			</li>
		</ul>
	</div>
</div>